<template>
  <div class="b-dialog-wrapper" v-show="visible">
    <div class="b-dialog" :style="{marginTop: top}">
      <div class="b-dialog-header">
        <span class="b-dialog-header-title" v-if="title">{{title}}</span>
        <button class="b-dialog-close-btn" @click="closeDialog">
          <i class="iconfont iconclose"></i>
        </button>
      </div>
      <div class="b-dialog-body">
        <slot></slot>
      </div>
      <div class="b-dialog-footer">
        <slot name="footer"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BDialog',
  props: {
    top: {
      type :String,
      default: ''
    },
    width: {
      type:String,
      default: '50%'
    },
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    closeDialog () {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style scoped lang='less'>
</style>